function ColorPicker(options)
{
    // Public properties
    this.FormWidgetAmountSliderHandleImage = options.FormWidgetAmountSliderHandleImage;
    this.TabRightActiveImage = options.TabRightActiveImage;
    this.TabRightInactiveImage = options.TabRightInactiveImage;
    this.TabLeftActiveImage = options.TabLeftActiveImage;
    this.TabLeftInactiveImage = options.TabLeftInactiveImage;
    this.AutoPostBack = options.AutoPostBack;
    this.AutoPostBackReference = options.AutoPostBackReference;
    this.PopupPosition = options.PopupPosition;

    // Public methods

    this.ShowColorPicker = function(inputObj, formField)
    {
        if (!color_picker_div || document.getElementById('dhtmlgoodies_colorPicker') == null)
        {
            color_picker_div = document.createElement('DIV');
            color_picker_div.id = 'dhtmlgoodies_colorPicker';
            color_picker_div.style.display = 'none';
            parent_td = inputObj.parentNode;
            parent_td.appendChild(color_picker_div);
            createColorPickerTopRow(color_picker_div);
            var contentDiv = document.createElement('DIV');
            contentDiv.id = 'color_picker_content';
            color_picker_div.appendChild(contentDiv);
            createWebColors(contentDiv);
            createNamedColors(contentDiv);
            createAllColorDiv(contentDiv);
            createStatusBar(color_picker_div);
        }
        if (color_picker_div.style.display == 'none' || color_picker_active_input != inputObj) color_picker_div.style.display = 'block'; else color_picker_div.style.display = 'none';

        switch (this.PopupPosition)
        {
            case 0:
                color_picker_div.style.left = "1px";
                color_picker_div.style.top = "23px";
                break;
            case 1:
                color_picker_div.style.left = "-223px";
                color_picker_div.style.top = "23px";
                break;
            case 2:
                color_picker_div.style.left = "1px";
                color_picker_div.style.top = "-199px";
                if (navigatorVersion <= 7 && MSIE)
                {
                    color_picker_div.style.top = "-210px";    
                }
                break;
            case 3:
                color_picker_div.style.left = "-223px";
                color_picker_div.style.top = "-199px";
                if (navigatorVersion <= 7 && MSIE)
                {
                    color_picker_div.style.top = "-210px";
                }
                break;
            default:
                color_picker_div.style.left = "1px";
                color_picker_div.style.top = "23px";
                break;
        }
        color_picker_form_field = formField;
        color_picker_active_input = inputObj;
    }

    // Private variables
    var MSIE = navigator.userAgent.indexOf('MSIE') >= 0 ? true : false;
    var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g, '$1') / 1;

    var slider_handle_image_obj = false;
    var sliderObjectArray = new Array();
    var slider_counter = 0;
    var slideInProgress = false;
    var handle_start_x;
    var event_start_x;
    var currentSliderIndex;
    var that = this;

    function form_widget_cancel_event()
    {
        return false;
    }

    function getImageSliderHeight()
    {
        if (!slider_handle_image_obj)
        {
            slider_handle_image_obj = new Image();
            slider_handle_image_obj.src = that.FormWidgetAmountSliderHandleImage;
        }
        if (slider_handle_image_obj.width > 0)
        {
            return;
        } else
        {
            var ref = getImageSliderHeight;
            setTimeout(ref, 50);
        }
    }

    function positionSliderImage(e, theIndex, inputObj)
    {
        if (this) inputObj = this;
        if (!theIndex) theIndex = inputObj.getAttribute('sliderIndex');
        var handleImg = document.getElementById('slider_handle' + theIndex);
        var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max'] - sliderObjectArray[theIndex]['min']);
        var currentValue = sliderObjectArray[theIndex]['formTarget'].value - sliderObjectArray[theIndex]['min'];
        handleImg.style.left = currentValue * ratio + 'px';
        setColorByRGB();
    }

    function adjustFormValue(theIndex)
    {
        var handleImg = document.getElementById('slider_handle' + theIndex);
        var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max'] - sliderObjectArray[theIndex]['min']);
        var currentPos = handleImg.style.left.replace('px', '');
        sliderObjectArray[theIndex]['formTarget'].value = Math.round(currentPos / ratio) + sliderObjectArray[theIndex]['min'];

    }

    function initMoveSlider(e)
    {

        if (document.all) e = event;
        slideInProgress = true;
        event_start_x = e.clientX;
        handle_start_x = this.style.left.replace('px', '');
        currentSliderIndex = this.id.replace(/[^\d]/g, '');
        return false;
    }

    function startMoveSlider(e)
    {
        if (document.all) e = event;
        if (!slideInProgress) return;
        var leftPos = handle_start_x / 1 + e.clientX / 1 - event_start_x;
        if (leftPos < 0) leftPos = 0;
        if (leftPos / 1 > sliderObjectArray[currentSliderIndex]['width']) leftPos = sliderObjectArray[currentSliderIndex]['width'];
        document.getElementById('slider_handle' + currentSliderIndex).style.left = leftPos + 'px';
        adjustFormValue(currentSliderIndex);
        if (sliderObjectArray[currentSliderIndex]['onchangeAction'])
        {
            eval(sliderObjectArray[currentSliderIndex]['onchangeAction']);
        }
    }

    function stopMoveSlider()
    {
        slideInProgress = false;
    }


    function form_widget_amount_slider(targetElId, formTarget, width, min, max, onchangeAction)
    {
        if (!slider_handle_image_obj)
        {
            getImageSliderHeight();
        }

        slider_counter = slider_counter + 1;
        sliderObjectArray[slider_counter] = new Array();
        sliderObjectArray[slider_counter] = { "width": width - 9, "min": min, "max": max, "formTarget": formTarget, "onchangeAction": onchangeAction };

        formTarget.setAttribute('sliderIndex', slider_counter);
        formTarget.onchange = positionSliderImage;
        var parentObj = document.createElement('DIV');
        parentObj.style.width = width + 'px';
        parentObj.style.height = '12px'; // The height of the image
        parentObj.style.position = 'relative';
        parentObj.id = 'slider_container' + slider_counter;
        document.getElementById(targetElId).appendChild(parentObj);

        var obj = document.createElement('DIV');
        obj.className = 'form_widget_amount_slider';
        obj.innerHTML = '<span></span>';
        obj.style.width = width + 'px';
        obj.id = 'slider_slider' + slider_counter;
        obj.style.position = 'absolute';
        obj.style.bottom = '0px';
        parentObj.appendChild(obj);

        var handleImg = document.createElement('IMG');
        handleImg.style.position = 'absolute';
        handleImg.style.left = '0px';
        handleImg.style.zIndex = 5;
        handleImg.src = slider_handle_image_obj.src;
        handleImg.id = 'slider_handle' + slider_counter;
        handleImg.onmousedown = initMoveSlider;
        if (document.body.onmouseup)
        {
            if (document.body.onmouseup.toString().indexOf('stopMoveSlider') == -1)
            {
                alert('You allready have an onmouseup event assigned to the body tag');
            }
        } else
        {
            document.body.onmouseup = stopMoveSlider;
            document.body.onmousemove = startMoveSlider;
        }
        handleImg.ondragstart = form_widget_cancel_event;
        parentObj.appendChild(handleImg);
        positionSliderImage(false, slider_counter);
    }



    var namedColors = new Array('AliceBlue', 'AntiqueWhite', 'Aqua', 'Aquamarine', 'Azure', 'Beige', 'Bisque', 'Black', 'BlanchedAlmond', 'Blue', 'BlueViolet', 'Brown',
	'BurlyWood', 'CadetBlue', 'Chartreuse', 'Chocolate', 'Coral', 'CornflowerBlue', 'Cornsilk', 'Crimson', 'Cyan', 'DarkBlue', 'DarkCyan', 'DarkGoldenRod', 'DarkGray',
	'DarkGreen', 'DarkKhaki', 'DarkMagenta', 'DarkOliveGreen', 'Darkorange', 'DarkOrchid', 'DarkRed', 'DarkSalmon', 'DarkSeaGreen', 'DarkSlateBlue', 'DarkSlateGray',
	'DarkTurquoise', 'DarkViolet', 'DeepPink', 'DeepSkyBlue', 'DimGray', 'DodgerBlue', 'Feldspar', 'FireBrick', 'FloralWhite', 'ForestGreen', 'Fuchsia', 'Gainsboro',
	'GhostWhite', 'Gold', 'GoldenRod', 'Gray', 'Green', 'GreenYellow', 'HoneyDew', 'HotPink', 'IndianRed', 'Indigo', 'Ivory', 'Khaki', 'Lavender', 'LavenderBlush',
	'LawnGreen', 'LemonChiffon', 'LightBlue', 'LightCoral', 'LightCyan', 'LightGoldenRodYellow', 'LightGrey', 'LightGreen', 'LightPink', 'LightSalmon', 'LightSeaGreen',
	'LightSkyBlue', 'LightSlateBlue', 'LightSlateGray', 'LightSteelBlue', 'LightYellow', 'Lime', 'LimeGreen', 'Linen', 'Magenta', 'Maroon', 'MediumAquaMarine',
	'MediumBlue', 'MediumOrchid', 'MediumPurple', 'MediumSeaGreen', 'MediumSlateBlue', 'MediumSpringGreen', 'MediumTurquoise', 'MediumVioletRed', 'MidnightBlue',
	'MintCream', 'MistyRose', 'Moccasin', 'NavajoWhite', 'Navy', 'OldLace', 'Olive', 'OliveDrab', 'Orange', 'OrangeRed', 'Orchid', 'PaleGoldenRod', 'PaleGreen',
	'PaleTurquoise', 'PaleVioletRed', 'PapayaWhip', 'PeachPuff', 'Peru', 'Pink', 'Plum', 'PowderBlue', 'Purple', 'Red', 'RosyBrown', 'RoyalBlue', 'SaddleBrown',
	'Salmon', 'SandyBrown', 'SeaGreen', 'SeaShell', 'Sienna', 'Silver', 'SkyBlue', 'SlateBlue', 'SlateGray', 'Snow', 'SpringGreen', 'SteelBlue', 'Tan', 'Teal', 'Thistle',
	'Tomato', 'Turquoise', 'Violet', 'VioletRed', 'Wheat', 'White', 'WhiteSmoke', 'Yellow', 'YellowGreen');

    var namedColorRGB = new Array('#F0F8FF', '#FAEBD7', '#00FFFF', '#7FFFD4', '#F0FFFF', '#F5F5DC', '#FFE4C4', '#000000', '#FFEBCD', '#0000FF', '#8A2BE2', '#A52A2A', '#DEB887',
	'#5F9EA0', '#7FFF00', '#D2691E', '#FF7F50', '#6495ED', '#FFF8DC', '#DC143C', '#00FFFF', '#00008B', '#008B8B', '#B8860B', '#A9A9A9', '#006400', '#BDB76B', '#8B008B',
	'#556B2F', '#FF8C00', '#9932CC', '#8B0000', '#E9967A', '#8FBC8F', '#483D8B', '#2F4F4F', '#00CED1', '#9400D3', '#FF1493', '#00BFFF', '#696969', '#1E90FF', '#D19275',
	'#B22222', '#FFFAF0', '#228B22', '#FF00FF', '#DCDCDC', '#F8F8FF', '#FFD700', '#DAA520', '#808080', '#008000', '#ADFF2F', '#F0FFF0', '#FF69B4', '#CD5C5C', '#4B0082',
	'#FFFFF0', '#F0E68C', '#E6E6FA', '#FFF0F5', '#7CFC00', '#FFFACD', '#ADD8E6', '#F08080', '#E0FFFF', '#FAFAD2', '#D3D3D3', '#90EE90', '#FFB6C1', '#FFA07A', '#20B2AA',
	'#87CEFA', '#8470FF', '#778899', '#B0C4DE', '#FFFFE0', '#00FF00', '#32CD32', '#FAF0E6', '#FF00FF', '#800000', '#66CDAA', '#0000CD', '#BA55D3', '#9370D8', '#3CB371',
	'#7B68EE', '#00FA9A', '#48D1CC', '#C71585', '#191970', '#F5FFFA', '#FFE4E1', '#FFE4B5', '#FFDEAD', '#000080', '#FDF5E6', '#808000', '#6B8E23', '#FFA500', '#FF4500',
	'#DA70D6', '#EEE8AA', '#98FB98', '#AFEEEE', '#D87093', '#FFEFD5', '#FFDAB9', '#CD853F', '#FFC0CB', '#DDA0DD', '#B0E0E6', '#800080', '#FF0000', '#BC8F8F', '#4169E1',
	'#8B4513', '#FA8072', '#F4A460', '#2E8B57', '#FFF5EE', '#A0522D', '#C0C0C0', '#87CEEB', '#6A5ACD', '#708090', '#FFFAFA', '#00FF7F', '#4682B4', '#D2B48C', '#008080',
	'#D8BFD8', '#FF6347', '#40E0D0', '#EE82EE', '#D02090', '#F5DEB3', '#FFFFFF', '#F5F5F5', '#FFFF00', '#9ACD32');


    var color_picker_div = false;
    var color_picker_active_tab = false;
    var color_picker_form_field = false;
    var color_picker_active_input = false;
    function baseConverter(number, ob, nb)
    {
        number = number + "";
        number = number.toUpperCase();
        var list = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var dec = 0;
        for (var i = 0; i <= number.length; i++)
        {
            dec += (list.indexOf(number.charAt(i))) * (Math.pow(ob, (number.length - i - 1)));
        }
        number = "";
        var magnitude = Math.floor((Math.log(dec)) / (Math.log(nb)));
        for (var i = magnitude; i >= 0; i--)
        {
            var amount = Math.floor(dec / Math.pow(nb, i));
            number = number + list.charAt(amount);
            dec -= amount * (Math.pow(nb, i));
        }
        if (number.length == 0) number = 0;
        return number;
    }    

    function cancelColorPickerEvent()
    {
        return false;
    }

    function showHideColorOptions(e, inputObj)
    {


        var thisObj = this;
        if (inputObj)
        {
            var parentNode = inputObj.parentNode;
            thisObj = inputObj;
        } else var parentNode = this.parentNode;
        var activeColorDiv = false;
        var subDiv = parentNode.getElementsByTagName('DIV')[0];
        counter = 0;
        var initZIndex = 10;
        var contentDiv = document.getElementById('color_picker_content').getElementsByTagName('DIV')[0];
        do
        {
            if (subDiv.tagName == 'DIV' && subDiv.className != 'colorPickerCloseButton')
            {
                if (subDiv == thisObj)
                {
                    thisObj.className = 'colorPickerTab_active';
                    var tabSpan = thisObj.firstChild;
                    tabSpan.style.backgroundImage = "url(" + that.TabLeftActiveImage + ")";

                    thisObj.style.zIndex = 50;
                    var img = thisObj.getElementsByTagName('IMG')[0];
                    img.src = that.TabRightActiveImage;
                    img.src = img.src.replace(/inactive/, 'active');
                    contentDiv.style.display = 'block';
                    activeColorDiv = contentDiv;
                } else
                {
                    subDiv.className = 'colorPickerTab_inactive';
                    var tabSpan = subDiv.firstChild;
                    tabSpan.style.backgroundImage = "url(" + that.TabLeftInactiveImage + ")";
                    var img = subDiv.getElementsByTagName('IMG')[0];
                    img.src = that.TabRightInactiveImage;
                    if (activeColorDiv)
                        subDiv.style.zIndex = initZIndex - counter;
                    else
                        subDiv.style.zIndex = counter;
                    contentDiv.style.display = 'none';
                }
                counter++;
            }
            subDiv = subDiv.nextSibling;
            if (contentDiv.nextSibling) contentDiv = contentDiv.nextSibling;
        } while (subDiv);


        document.getElementById('colorPicker_statusBarTxt').innerHTML = '&nbsp;';


    }

    function createColorPickerTopRow(inputObj)
    {
        var tabs = ['RGB', 'Named colors', 'Color slider'];
        var tabWidths = [37, 90, 70];
        var div = document.createElement('DIV');
        div.className = 'colorPicker_topRow';

        inputObj.appendChild(div);
        var currentWidth = 0;
        for (var no = 0; no < tabs.length; no++)
        {

            var tabDiv = document.createElement('DIV');
            tabDiv.onselectstart = cancelColorPickerEvent;
            tabDiv.ondragstart = cancelColorPickerEvent;
            if (no == 0)
            {
                suffix = 'active';
                color_picker_active_tab = this;
            } else suffix = 'inactive';

            tabDiv.id = 'colorPickerTab' + no;
            tabDiv.onclick = showHideColorOptions;
            if (no == 0) tabDiv.style.zIndex = 50; else tabDiv.style.zIndex = 1 + (tabs.length - no);
            tabDiv.style.left = currentWidth + 'px';
            tabDiv.style.position = 'absolute';
            tabDiv.className = 'colorPickerTab_' + suffix;
            var tabSpan = document.createElement('SPAN');
            if (suffix == 'active')
                tabSpan.style.backgroundImage = "url(" + that.TabLeftActiveImage + ")";
            else
                tabSpan.style.backgroundImage = "url(" + that.TabLeftInactiveImage + ")";
            tabSpan.innerHTML = tabs[no];
            tabDiv.appendChild(tabSpan);
            var tabImg = document.createElement('IMG');
            if (suffix == 'active')
                tabImg.src = that.TabRightActiveImage;
            else
                tabImg.src = that.TabRightInactiveImage;
            tabDiv.appendChild(tabImg);
            div.appendChild(tabDiv);
            if (navigatorVersion < 6 && MSIE)
            {	/* Lower IE version fix */
                tabSpan.style.position = 'relative';
                tabImg.style.position = 'relative';
                tabImg.style.left = '-3px';
                tabDiv.style.cursor = 'hand';
            }
            currentWidth = currentWidth + tabWidths[no];

        }

        var closeButton = document.createElement('DIV');
        closeButton.className = 'colorPickerCloseButton';
        closeButton.innerHTML = 'x';
        closeButton.onclick = closeColorPicker;
        closeButton.onmouseover = toggleCloseButton;
        closeButton.onmouseout = toggleOffCloseButton;
        div.appendChild(closeButton);

    }

    function toggleCloseButton()
    {
        this.style.color = '#FFF';
        this.style.backgroundColor = '#317082';
    }
    function toggleOffCloseButton()
    {
        this.style.color = '';
        this.style.backgroundColor = '';

    }
    function closeColorPicker()
    {

        color_picker_div.style.display = 'none';
    }
    function createWebColors(inputObj)
    {
        var webColorDiv = document.createElement('DIV');
        webColorDiv.style.paddingTop = '1px';
        inputObj.appendChild(webColorDiv);
        for (var r = 15; r >= 0; r -= 3)
        {
            for (var g = 0; g <= 15; g += 3)
            {
                for (var b = 0; b <= 15; b += 3)
                {
                    var red = baseConverter(r, 10, 16) + '';
                    var green = baseConverter(g, 10, 16) + '';
                    var blue = baseConverter(b, 10, 16) + '';

                    var color = '#' + red + red + green + green + blue + blue;
                    var div = document.createElement('DIV');
                    div.style.backgroundColor = color;
                    div.innerHTML = '<span></span>';
                    div.className = 'colorSquare';
                    div.title = color;
                    div.onclick = chooseColor;
                    div.setAttribute('rgbColor', color);
                    div.onmouseover = colorPickerShowStatusBarText;
                    div.onmouseout = colorPickerHideStatusBarText;
                    webColorDiv.appendChild(div);
                }
            }
        }
    }

    function createNamedColors(inputObj)
    {
        var namedColorDiv = document.createElement('DIV');
        namedColorDiv.style.paddingTop = '1px';
        namedColorDiv.style.display = 'none';
        inputObj.appendChild(namedColorDiv);
        for (var no = 0; no < namedColors.length; no++)
        {
            var color = namedColorRGB[no];
            var div = document.createElement('DIV');
            div.style.backgroundColor = color;
            div.innerHTML = '<span></span>';
            div.className = 'colorSquare';
            div.title = namedColors[no];
            div.onclick = chooseColor;
            div.onmouseover = colorPickerShowStatusBarText;
            div.onmouseout = colorPickerHideStatusBarText;
            div.setAttribute('rgbColor', color);
            namedColorDiv.appendChild(div);
        }

    }

    function colorPickerHideStatusBarText()
    {
        document.getElementById('colorPicker_statusBarTxt').innerHTML = '&nbsp;';
    }

    function colorPickerShowStatusBarText()
    {
        var txt = this.getAttribute('rgbColor');
        if (this.title.indexOf('#') < 0) txt = txt + " (" + this.title + ")";
        document.getElementById('colorPicker_statusBarTxt').innerHTML = txt;
    }

    function createAllColorDiv(inputObj)
    {
        var allColorDiv = document.createElement('DIV');
        allColorDiv.style.display = 'none';
        allColorDiv.className = 'js_color_picker_allColorDiv';
        allColorDiv.style.paddingLeft = '3px';
        allColorDiv.style.paddingTop = '5px';
        allColorDiv.style.paddingBottom = '5px';
        inputObj.appendChild(allColorDiv);

        var labelDiv = document.createElement('DIV');
        labelDiv.className = 'colorSliderLabel';
        labelDiv.innerHTML = 'R';
        allColorDiv.appendChild(labelDiv);

        var innerDiv = document.createElement('DIV');
        innerDiv.className = 'colorSlider';
        innerDiv.id = 'sliderRedColor';
        allColorDiv.appendChild(innerDiv);

        var innerDivInput = document.createElement('DIV');
        innerDivInput.className = 'colorInput';

        var input = document.createElement('INPUT');
        input.id = 'js_color_picker_red_color';
        input.maxlength = 3;
        input.style.width = '48px';
        input.style.fontSize = '11px';
        input.name = 'redColor';
        input.value = 0;

        innerDivInput.appendChild(input);
        allColorDiv.appendChild(innerDivInput);

        var labelDiv = document.createElement('DIV');
        labelDiv.className = 'colorSliderLabel';
        labelDiv.innerHTML = 'G';
        allColorDiv.appendChild(labelDiv);

        var innerDiv = document.createElement('DIV');
        innerDiv.className = 'colorSlider';
        innerDiv.id = 'sliderGreenColor';
        allColorDiv.appendChild(innerDiv);

        var innerDivInput = document.createElement('DIV');
        innerDivInput.className = 'colorInput';

        var input = document.createElement('INPUT');
        input.id = 'js_color_picker_green_color';
        input.maxlength = 3;
        input.style.width = '48px';
        input.style.fontSize = '11px';
        input.name = 'GreenColor';
        input.value = 0;

        innerDivInput.appendChild(input);
        allColorDiv.appendChild(innerDivInput);

        var labelDiv = document.createElement('DIV');
        labelDiv.className = 'colorSliderLabel';
        labelDiv.innerHTML = 'B';
        allColorDiv.appendChild(labelDiv);
        var innerDiv = document.createElement('DIV');
        innerDiv.className = 'colorSlider';
        innerDiv.id = 'sliderBlueColor';
        allColorDiv.appendChild(innerDiv);

        var innerDivInput = document.createElement('DIV');
        innerDivInput.className = 'colorInput';

        var input = document.createElement('INPUT');
        input.id = 'js_color_picker_blue_color';
        input.maxlength = 3;
        input.style.width = '48px';
        input.style.fontSize = '11px';
        input.name = 'BlueColor';
        input.value = 0;

        innerDivInput.appendChild(input);
        allColorDiv.appendChild(innerDivInput);


        var colorPreview = document.createElement('DIV');
        colorPreview.className = 'colorPreviewDiv';
        colorPreview.id = 'colorPreview';
        colorPreview.style.backgroundColor = '#000000';
        colorPreview.innerHTML = '<span></span>';
        colorPreview.title = 'Click on me to assign color';
        allColorDiv.appendChild(colorPreview);
        colorPreview.onclick = chooseColorSlider;

        var colorCodeDiv = document.createElement('DIV');
        colorCodeDiv.className = 'colorCodeDiv';
        var input = document.createElement('INPUT');
        input.id = 'js_color_picker_color_code';

        colorCodeDiv.appendChild(input);
        input.maxLength = 7;
        input.style.fontSize = '11px';
        input.style.width = '48px';
        input.value = '#000000';
        input.onchange = setPreviewColorFromTxt;
        input.onblur = setPreviewColorFromTxt;
        allColorDiv.appendChild(colorCodeDiv);

        var clearingDiv = document.createElement('DIV');
        clearingDiv.style.clear = 'both';
        allColorDiv.appendChild(clearingDiv);


        form_widget_amount_slider('sliderRedColor', document.getElementById('js_color_picker_red_color'), 170, 0, 255, "setColorByRGB()");
        form_widget_amount_slider('sliderGreenColor', document.getElementById('js_color_picker_green_color'), 170, 0, 255, "setColorByRGB()");
        form_widget_amount_slider('sliderBlueColor', document.getElementById('js_color_picker_blue_color'), 170, 0, 255, "setColorByRGB()");
    }

    function setPreviewColorFromTxt()
    {
        if (this.value.match(/\#[0-9A-F]{6}/g))
        {
            document.getElementById('colorPreview').style.backgroundColor = this.value;
            var r = this.value.substr(1, 2);
            var g = this.value.substr(3, 2);
            var b = this.value.substr(5, 2);
            document.getElementById('js_color_picker_red_color').value = baseConverter(r, 16, 10);
            document.getElementById('js_color_picker_green_color').value = baseConverter(g, 16, 10);
            document.getElementById('js_color_picker_blue_color').value = baseConverter(b, 16, 10);

            positionSliderImage(false, 1, document.getElementById('js_color_picker_red_color'));
            positionSliderImage(false, 2, document.getElementById('js_color_picker_green_color'));
            positionSliderImage(false, 3, document.getElementById('js_color_picker_blue_color'));
        }

    }

    function chooseColor()
    {
        color_picker_form_field.value = this.getAttribute('rgbColor');
        color_picker_form_field.style.color = color_picker_form_field.value;
        color_picker_div.style.display = 'none';
        if (that.AutoPostBack)
        {
            eval(that.AutoPostBackReference);
        }
    }

    function createStatusBar(inputObj)
    {
        var div = document.createElement('DIV');
        div.className = 'colorPicker_statusBar';
        var innerSpan = document.createElement('SPAN');
        innerSpan.id = 'colorPicker_statusBarTxt';
        div.appendChild(innerSpan);
        inputObj.appendChild(div);
    }

    function chooseColorSlider()
    {
        color_picker_form_field.value = document.getElementById('js_color_picker_color_code').value;
        color_picker_form_field.style.color = color_picker_form_field.value;
        color_picker_div.style.display = 'none';
    }    

    function setColorByRGB()
    {
        var formObj = document.forms[0];
        var r = document.getElementById('js_color_picker_red_color').value.replace(/[^\d]/, '');
        var g = document.getElementById('js_color_picker_green_color').value.replace(/[^\d]/, '');
        var b = document.getElementById('js_color_picker_blue_color').value.replace(/[^\d]/, '');
        if (r / 1 > 255) r = 255;
        if (g / 1 > 255) g = 255;
        if (b / 1 > 255) b = 255;
        r = baseConverter(r, 10, 16) + '';
        g = baseConverter(g, 10, 16) + '';
        b = baseConverter(b, 10, 16) + '';
        if (r.length == 1) r = '0' + r;
        if (g.length == 1) g = '0' + g;
        if (b.length == 1) b = '0' + b;

        document.getElementById('colorPreview').style.backgroundColor = '#' + r + g + b;
        document.getElementById('js_color_picker_color_code').value = '#' + r + g + b;
    }

    // Color functions

    function baseConverter(number, ob, nb)
    {
        number = number + "";
        number = number.toUpperCase();
        var list = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var dec = 0;
        for (var i = 0; i <= number.length; i++)
        {
            dec += (list.indexOf(number.charAt(i))) * (Math.pow(ob, (number.length - i - 1)));
        }
        number = "";
        var magnitude = Math.floor((Math.log(dec)) / (Math.log(nb)));
        for (var i = magnitude; i >= 0; i--)
        {
            var amount = Math.floor(dec / Math.pow(nb, i));
            number = number + list.charAt(amount);
            dec -= amount * (Math.pow(nb, i));
        }
        if (number.length == 0) number = 0;
        return number;
    }

    // Converts a RGB color to HSV
    function toHSV(rgbColor)
    {
        rgbColor = rgbColor.replace('#', '');

        red = baseConverter(rgbColor.substr(0, 2), 16, 10);
        green = baseConverter(rgbColor.substr(2, 2), 16, 10);
        blue = baseConverter(rgbColor.substr(4, 2), 16, 10);
        if (red.length == 0) red = 0;
        if (green.length == 0) green = 0;
        if (blue.length == 0) blue = 0;
        red = red / 255;
        green = green / 255;
        blue = blue / 255;

        maxValue = Math.max(red, green, blue);
        minValue = Math.min(red, green, blue);

        var hue = 0;

        if (maxValue == minValue)
        {
            hue = 0;
            saturation = 0;
        } else
        {
            if (red == maxValue)
            {
                hue = (green - blue) / (maxValue - minValue) / 1;
            } else if (green == maxValue)
            {
                hue = 2 + (blue - red) / 1 / (maxValue - minValue) / 1;
            } else if (blue == maxValue)
            {
                hue = 4 + (red - green) / (maxValue - minValue) / 1;
            }
            saturation = (maxValue - minValue) / maxValue;
        }
        hue = hue * 60;
        valueBrightness = maxValue;

        if (valueBrightness / 1 < 0.5)
        {
            //saturation = (maxValue - minValue) / (maxValue + minValue);
        }
        if (valueBrightness / 1 >= 0.5)
        {
            //saturation = (maxValue - minValue) / (2 - maxValue - minValue);
        }


        returnArray = [hue, saturation, valueBrightness];
        return returnArray;
    }

    function toRgb(hue, saturation, valueBrightness)
    {
        Hi = Math.floor(hue / 60);
        if (hue == 360) Hi = 0;
        f = hue / 60 - Hi;
        p = (valueBrightness * (1 - saturation)).toPrecision(2);
        q = (valueBrightness * (1 - (f * saturation))).toPrecision(2);
        t = (valueBrightness * (1 - ((1 - f) * saturation))).toPrecision(2);

        switch (Hi)
        {
            case 0:
                red = valueBrightness;
                green = t;
                blue = p;
                break;
            case 1:
                red = q;
                green = valueBrightness;
                blue = p;
                break;
            case 2:
                red = q;
                green = valueBrightness;
                blue = t;
                break;
            case 3:
                red = p;
                green = q; ;
                blue = valueBrightness;
                break;
            case 4:
                red = t;
                green = p;
                blue = valueBrightness;
                break;
            case 5:
                red = valueBrightness;
                green = p;
                blue = q;
                break;
        }

        if (saturation == 0)
        {
            red = valueBrightness;
            green = valueBrightness;
            blue = valueBrightness;
        }

        red *= 255;
        green *= 255;
        blue *= 255;

        red = Math.round(red);
        green = Math.round(green);
        blue = Math.round(blue);

        red = baseConverter(red, 10, 16);
        green = baseConverter(green, 10, 16);
        blue = baseConverter(blue, 10, 16);

        red = red + "";
        green = green + "";
        blue = blue + "";

        while (red.length < 2)
        {
            red = "0" + red;
        }
        while (green.length < 2)
        {
            green = "0" + green;
        }
        while (blue.length < 2)
        {
            blue = "0" + "" + blue;
        }
        rgbColor = "#" + red + "" + green + "" + blue;
        return rgbColor.toUpperCase();
    }

    function findColorByDegrees(rgbColor, degrees)
    {
        rgbColor = rgbColor.replace('#', '');
        myArray = toHSV(rgbColor);
        myArray[0] += degrees;
        if (myArray[0] >= 360) myArray[0] -= 360;
        if (myArray[0] < 0) myArray[0] += 360;
        return toRgb(myArray[0], myArray[1], myArray[2]);
    }

    function findColorByBrightness(rgbColor, brightness)
    {

        rgbColor = rgbColor.replace('#', '');
        myArray = toHSV(rgbColor);

        myArray[2] += brightness / 100;
        if (myArray[2] > 1) myArray[2] = 1;
        if (myArray[2] < 0) myArray[2] = 0;

        myArray[1] += brightness / 100;
        if (myArray[1] > 1) myArray[1] = 1;
        if (myArray[1] < 0) myArray[1] = 0;

        return toRgb(myArray[0], myArray[1], myArray[2]);

    }

}	